<!-- Copyright 2021 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->
<style include="cr-shared-style">

#lessonMenu {
  margin: auto;
  text-align: start;
  width: 800px;
}

#lessonShortcuts {
  background: #FFF;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
  font-size: 22px;
  max-height: 400px;
  overflow: scroll;
}

h1 {
  font-family: 'Google Sans', 'Roboto';
  font-size: 32px;
  font-weight: medium;
  line-height: 40px;
  margin-bottom: 32px;
}

cr-link-row {
  font-family: 'Roboto';
  font-weight: medium;
}

</style>

<div id="lessonMenu"
    hidden$="[[ shouldHideLessonMenu_(activeScreen) ]]">
  <h1 id="lessonMenuHeader"
      tabindex="-1" aria-describedby="lessonMenuHeaderHint">
    [[ computeLessonMenuHeader_(curriculum, numLessons) ]]
  </h1>
  <div id="lessonMenuHeaderHint" hidden>[[ getMsg(headerDescription_) ]]</div>
  <div id="lessonShortcuts">
    <template id="lessonMenuButtonTemplate" is="dom-repeat"
        items="[[ buttonData_ ]]" as="data">
      <cr-link-row class="hr" on-click="onButtonClicked_"
          label="[[ getMsg(data.title) ]]"
          hidden$="[[shouldHideLessonButton_(data.curriculums, curriculum) ]]">
      </cr-link-row>
    </template>
  </div>
</div>
